<template>
  <div class="modal-cate">
    <van-nav-bar fixed title="Alterar categoria" left-arrow :border="false" @click-left="handleClose" />
    <!-- <div class="title">Alterar categoria</div> -->
    <div class="list" v-if="!detail.id">
      <!-- 全部 -->
      <div class="item" @click="toAll" :style="{ background: getBackground() }">
        <div class="left">
         <img :src="domain + '/group1/default/20210224/14/35/4/favicon.png'" alt="" style="width:48px;height:48px"/>
        </div>
        <div class="center">Todos os anúncios</div>
        <div class="right">
          <van-icon name="arrow" size="20"></van-icon>
        </div>
      </div>
      <div class="item" v-for="(item, index) in typeList" :key="index" :style="{ background: getBackground() }" @click="handleDetail(item)">
        <div class="left">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="center">{{ item.showName }}</div>
        <div class="right">
          <van-icon name="arrow" size="20"></van-icon>
        </div>
      </div>
    </div>
    <div class="detail-list" v-if="detail.id">
      <div class="item" :style="{ background: getBackground() }">
        <div class="left">
          <img :src="detail.imgUrl" alt="" />
        </div>
        <div class="center">{{ detail.showName }}</div>
      </div>
      <div class="sec-list">
        <div class="sec-item" v-if="detail.id&&showAll" @click="handleCheck()">
          <div class="sec-left">Tudo em {{ detail.showName }}</div>
        </div>
        <div class="sec-item" v-for="(cate, index) in detail.categoryList" :key="index" @click="handleCheck(cate)">
          <div class="sec-left">{{ cate.showName }}</div>
          <div class="sec-right" v-if="cateId === cate.id">
            <van-icon name="success" size="20" color="#fb8c24"></van-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api";
import { getImgUrl } from "@/utils";
import { Domain } from "@/constants";
export default {
  name: "ModalCate",
  props: {
    sectionId: {
      type: [Number, String],
      default: "",
    },
    categoryId: {
      type: [Number, String],
      default: "",
    },
    showAll:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      typeList: [],
      secId: "",
      cateId: "",
      domain: Domain,
    };
  },
  created() {
    this.secId = this.sectionId;
    this.cateId = this.categoryId;
    this.loadTypeData();
  },
  computed: {
    detail() {
      return this.typeList.find((item) => item.id === this.secId) || {};
    },
  },
  methods: {
    handleClose() {
      if (this.detail.id) {
        this.secId = "";
      } else {
        this.$emit("close");
      }
    },
    getBackground() {
      const colors = ["#D2F7F5", "#FBBEB7", "#A9ED93", "#FED0F8", "#77DFDD", "#FEBD32", "#A6C9FC"];
      const index = Math.floor(Math.random() * colors.length);
      return colors[index];
    },
    loadTypeData() {
      Api.goodsTypeList().then((res) => {
        const result = res.map((item) => Object.assign(item, { imgUrl: getImgUrl(item.imgPath) }));
        this.typeList = result;
      });
    },
    handleDetail(item) {
      this.secId = item.id;
    },
    toAll(){
      this.$emit("confirm", {
          query: {
            type: null,
            sectionId: null,
            categoryId: null,
          },
          sectionName: '',
          categoryName: "",
        });
    },
    handleCheck(item) {
      if (item) {
        const arr = [this.detail.id, item.id].join(",");
        this.$emit("confirm", {
          query: {
            type: arr,
            sectionId: this.detail.id,
            categoryId: item.id,
          },
          sectionName: this.detail.showName,
          categoryName: item.showName,
        });
      } else {
        this.$emit("confirm", {
          query: {
            type: this.detail.id,
            sectionId: this.detail.id,
            categoryId: "",
          },
          sectionName: this.detail.showName,
          categoryName: "",
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.modal-cate {
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 1000;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // .title {
  //   font-weight: bold;
  //   font-size: 28px;
  //   color: #000;
  //   padding: 16px 16px 0;
  //   margin-top: 50px;
  // }
  .list {
    margin-top: 50px;
    flex: 1;
    overflow: auto;
    padding: 16px;
    box-sizing: border-box;
   
    .item {
      margin-bottom: 10px;
      padding: 16px;
      display: flex;
      align-items: center;
      border-radius: 6px;
      .left {
        flex: none;
        img {
          width: 48px;
          height: 48px;
          display: inline-block;
          background: #f2f2f2;
          border-radius: 100%;
        }
      }
      .center {
        flex: auto;
        width: 0;
        margin: 0 15px;
        font-size: 16px;
        color: #333;
      }
    }
  }
  .detail-list {
    margin-top: 50px;
    flex: 1;
    overflow: auto;
    padding: 16px;
    box-sizing: border-box;
    .item {
      margin-bottom: 10px;
      padding: 8px;
      display: flex;
      align-items: center;
      border-radius: 6px;
      .left {
        flex: none;
        img {
          width: 48px;
          height: 48px;
          display: inline-block;
          background: #f2f2f2;
          border-radius: 100%;
        }
      }
      .center {
        flex: auto;
        width: 0;
        margin: 0 15px;
        font-size: 16px;
        color: #333;
      }
      .right {
        flex: none;
      }
    }
    .sec-list {
      .sec-item {
        display: flex;
        align-items: center;
        padding: 16px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ededed;
        .sec-left {
          flex: auto;
          width: 0;
        }
        .sec-right {
          margin-left: 10px;
          flex: none;
        }
      }
    }
  }
}
</style>
